<template>
	<view>
		<view class="detail">
			<view class="detailtop flex-between">
				<view class="">
					<view class="text">累计{{title}}收益</view>
					<view class="">6,547.00</view>
				</view>
				<view class="right">已加入630天</view>
			</view>
		</view>
		<!-- <view class="seltime flex-between">
			<view class="seltime_left flex">
				<view class="">2024-03</view>
				<image src="../../static/wallet/down.png" mode=""></image>
			</view>
		</view> -->
		<view class="">
			<view class="incometime flex-between">
				<picker mode="date" fields="month" :end="newDay"   @change="clickTab">
					<view :class=" 'profit_b active'" >
						{{day}}<image src="../../static/wallet/down.png" mode=""></image>
					</view>
				</picker>
				<view class="seltime_right">当月收益￥10.00</view>
			</view>
			<view class="charts-box_mt">
				<view class="isname">
					{{title}}收益趋势
				</view>
			    <view class="charts-box">
			    	<qiun-data-charts v-if="this.lineData.data" type="area" :opts="opts" :chartData="chartData" />
			    	<noneDate  v-else></noneDate>
			    </view>
			</view>
		</view>
		<view class="eqincome">
			{{title}}收益明细
		</view>
		<view class="income_detail"  v-for="(item,index) in iconInfo.list" :key="index" @click="jump(`./profitInfo?date=${item.date}`)">
			<view class="time">
				{{item.date}}
			</view>
			<view class="number">
				+{{item.point}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				day:'',
				chartData: {},
				opts: {
					color: ["#5D78FF","#00aa90", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",  "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15], // 图位置
					enableScroll: false,
					xAxis: {
						disableGrid: true,
						labelCount: 14, //设置显示个数
						// format: 'formatterTime2'
						fontSize:'9',
						rotateLabel:true,
						marginTop:'5'
						// rotateAngle:'30'
					},
					fontSize:'10',
					dataLabel: false, // 数据显示
					legend: {
					  show:false,
					},
					dataPointShape: false, // 圆点显示
					yAxis: {
						gridType: "dash",
						dashLength: 2,
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.8,
							addLine: true,
							width: 1,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				iconInfo:{
					
				},
				lineData:{data:[]},
				day:'',
				newDay:'',
				title:''
			}
		},
		onLoad(option) {
			this.title=option.title
			uni.setNavigationBarTitle({
				title:option.title
			})
			this.day = this.$fun.getYMD()
			this.newDay = this.$fun.getYMD()
		},
		onShow() {
			//模拟从服务器获取数据
			this.getServerData()
		},
		methods: {
			onUecharts(){
				let res = {
					// categories: this.lineData.date,
					categories:["02-01", "02-02", "02-03", "02-04", "02-05", "02-06", "02-07", "02-08", "02-09", "02-10", "02-11", "02-11", "02-11", "02-11"],
					series: [{
							name: "收益",
							// data: this.lineData.flow
							data:[78.94, 86.71, 85.99, 85.92, 85.99, 86.96, 104.25, 117.8, 117, 116.15, 114.88, 116.65, 116.49, 116.72]
						},
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			},
			clickTab(e){
				this.day = e.detail.value
				this.chartsDataLine1=[]
				this.getServerData()
			},
			jump(url){
				this.$fun.jump(url)
			},
			getServerData() {
				let data = []
				this.$fun.ajax.post('butt/incomeList',{day:this.day}).then(res=>{
					console.log(res)
					this.iconInfo=res.data
					// this.lineData = this.$fun.setArr(res.data.kline.date,res.data.kline.flow)
					if(res.data.kline!==undefined){
						this.lineData = res.data.kline
						// console.log(this.lineData);
						this.onUecharts()
					}
					this.onUecharts()
				})
			}
		}
	}
</script>

<style lang="scss">
.detail{
	height: 178rpx;
	background: #F2F2F2;
	padding-top: 30rpx;
}
.detailtop{
	width: 750rpx;
	height: 148rpx;
	background-image: url('../../static/wallet/bg2@2x.png');
	background-repeat: no-repeat;
	background-size: 101.5% 100%;
	font-weight: 500;
	font-size: 60rpx;
	color: #FFFFFF;
	padding: 24rpx 60rpx;
	box-sizing: border-box;
	.text{
		font-size: 24rpx;
	}
	.right{
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 144rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		background: #B7B7FF;
		border-radius: 0rpx 24rpx 0rpx 24rpx;
		opacity: 0.3;
		margin-right: -35rpx;
		margin-top: -100rpx;
	}
}
.seltime{
	width: 750rpx;
	height: 88rpx;
	background: #FFFFFF;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	padding: 0 30rpx;
	box-sizing: border-box;
	&_left{
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
	&_right{
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
	}
}
.incometime{
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		box-sizing: border-box;
		padding: 0 30rpx;
		image{
			width: 28rpx;
			height: 28rpx;
			margin-left: 7rpx;
		}
	}
	.charts-box_mt{
		background-color: #FFFFFF;
		// height: 286rpx;
		padding-bottom: 40rpx;
		.charts-box{
			height: 266rpx;
		}
		.isname{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			margin-left: 30rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}
	}
	.eqincome{
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 78rpx;
		text-align: left;
		font-style: normal;
		margin-left: 20rpx;
	}
	.income_detail{
		width: 710rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		line-height: 64rpx;
		font-family: PingFangSC, PingFang SC;
		text-align: left;
		font-style: normal;
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		margin: 0 auto 10rpx;
		.time{
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
		}
			
		.number{
			font-weight: 500;
			font-size: 24rpx;
			color: #FF3333;
		}
	}
</style>
